<template>
  <div class="app" v-if="user!=null">
    <div style="margin: 0 auto ;text-align:center;">
      <h3>
        <span>{{user.nickName}}</span>
      </h3>
    </div>
    <div style="font-size: 1rem;min-width: 100px;text-align: center">
      <el-row :gutter="10">
        <el-col :span="12">
          <span style="color: #F56C6C;">lv.{{user.level}}</span>
        </el-col>
        <el-col :span="12">
          <span><i class="el-icon-coin"/>{{user.balance}} </span>
        </el-col>
      </el-row>
<!--      <el-progress :percentage="50"></el-progress>-->
    </div>
    <el-divider></el-divider>
    <div style="min-width: 100px">
      <el-menu :default-active="this.$route.path" mode="" router class="myEl-menu">
        <el-menu-item index="/InfoOptionPage/UserOptionComponent" >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-user"/>
            </el-col>
            <el-col :span="18">
              <span>个人中心</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>

        </el-menu-item>
        <el-menu-item index="/InfoOptionPage/BookshelfComponent" >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-s-unfold"/>
            </el-col>
            <el-col :span="18">
              <span>书架</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>
        </el-menu-item>


        <el-menu-item index="/InfoOptionPage/HistoryComponent" >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-reading"/>
            </el-col>
            <el-col :span="18">
              <span>历史记录</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>
        </el-menu-item>
        <el-menu-item>
          <el-row :gutter="10">
            <el-col :span="4">
              <i v-if="isDark" class="el-icon-moon"/>
              <i v-else class="el-icon-sunny"/>
            </el-col>
            <el-col :span="16">
              <span>黑暗模式</span>
            </el-col>
            <el-col :span="4">
              <el-switch
                  v-model="isDark">
              </el-switch>
            </el-col>
          </el-row>
        </el-menu-item>
      </el-menu>
    </div>

    <div style="min-width: 100px">
      <el-divider></el-divider>
      <el-menu  class="myEl-menu" text-color="#F56C6C" @select="Logout">

        <el-menu-item  >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-switch-button"/>
            </el-col>
            <el-col :span="18">
              <span>退出登录</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>
        </el-menu-item>
      </el-menu>
    </div>

  </div>
  <div class="app" style="text-align: center" v-else>
    <el-button type="primary">Login</el-button>
    <el-divider></el-divider>
    <div style="font-size: 0.7rem">第一次使用?</div>
    <el-link type="primary" style="font-size: 0.7rem">创建一个</el-link>
  </div>
</template>

<script>
import router from "@/router";
import {  useDark , useToggle} from "@vueuse/core/index";
export default {
  name: "InfoComponent",
  props: {},
  data() {

    return {
      isDark : useDark(),
      toggleDark : useToggle(this.isDark)
    }
  }, methods: {
    darkToggle(){
      console.log('dark')
      useToggle(this.isDark)
    },
    log(msg,type){
      this.$message({
        message:msg,
        type
      });
    },
    Logout() {
      window.localStorage.removeItem('token');
      this.$store.commit("setUser",Object)
      this.log("已退出登录","success")
      router.push("/Login")
    }
  }, watch: {}, computed: {
    user(){
      return this.$store.getters.getUser
    }
  }
}
</script>

<style scoped>

.app{
  font-family: '微软雅黑';
  margin: 0 auto ;
  width: 100%;

}
</style>